<template>
  <div class="chat-input-container max-width">
    <div class="chat-input">
      <ChatFiles :files="filesList" :isDelete="true" @delete="handleDeleteFile" />
      <el-input v-model="messageText" type="textarea" :maxlength="500" autosize placeholder="和 知也 来聊聊标准那些事吧 ~ ~"
        resize="none" @keydown="handleKeydown" ref="messageInput" class="message-input" />
      <div class="send-actions">
        <el-button type="default" class="file-btn">
          <EleUploadImage ref="uploadImageRef" :fileType="fileType" v-model:value="filesList" :uploadUrl="uploadUrl"
            :responseFn="handleResponse" @success="handleUpload" :limit="10" multiple :isShowSuccessTip="false" />
          <img src="@/assets/images/chat/ai_icon8.png" alt="" class="icon">
        </el-button>
        <el-button type="default" :disabled="!messageText.trim()" @click="sendMessage" class="send-btn">
          <img v-if="messageText.trim()" src="@/assets/images/chat/ai_icon6.png" alt="" class="icon">
          <img v-else src="@/assets/images/chat/ai_icon7.png" alt="" class="icon">
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import ChatFiles from "./ChatFiles.vue";
import EleUploadImage from "@/components/EleUploadImage/index.vue";
import { ElMessage } from "element-plus";
import { ref } from "vue";
const props = defineProps({
  isStreaming: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits([
  "send-message",
  "send-file",
]);


const messageText = ref("");
const showEmoji = ref(false);
const messageInput = ref(null);
const fileInput = ref(null);
const filesList = ref([]);
const fileType = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];
const uploadUrl = "/console/api/files/upload";

const setMessageText = (text) => {
  messageText.value = text;
};

const selectFile = () => {
  fileInput.value.click();
};
const sendMessage = () => {
  if (!messageText.value.trim()) return;
  emit("send-message", {
    content: messageText.value.trim(),
    timestamp: new Date(),
    files: filesList.value,
  });

  messageText.value = "";
  showEmoji.value = false;
  filesList.value = [];
};

const handleKeydown = (event) => {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    sendMessage();
  }
};


const handleResponse = (response, file, attachmentFileList) => {
  let type = response.mime_type.split('/')[1];
  let mime_type = type === 'jpg' || type === 'jpeg' || type === 'png' ? 'image' : 'document';
  return { url: file.url, name: response.name, size: file.size, type: mime_type, id: response.id };
};

const handleUpload = (file, attachmentFileList) => {
};
// 处理文件删除的函数
const handleDeleteFile = ({ item, index }) => {
  filesList.value.splice(index, 1);
};





defineExpose({ setMessageText });
</script>

<style scoped lang="scss">
.chat-input-container {

  :deep(.el-textarea__inner:focus) {
    outline: none;
    box-shadow: none;
  }

  :deep(.el-textarea__inner) {
    border: none;
    height: 55px;
    box-shadow: none;
    padding: 0;
    min-height: 55px !important;
  }



  .chat-input {
    background: #fff;
    border: 1px solid #E8E8E8;
    padding: 10px 15px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px auto 0;
    width: 100%;

    .message-input {
      border: none;
      resize: none;
      outline: none;
      width: 100%;
    }

    .send-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;

      .el-button {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-left: 20px;
        border-radius: 40px;
        border: none !important;

      }
    }

    .icon {
      width: 32px;
      height: 32px;
      object-fit: cover;
      border-radius: 40px;
      cursor: pointer;
    }

    .file-btn {
      position: relative;
      overflow: hidden;
      border: none !important;

      &:hover {
        box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.11);
      }

      .ele-upload-image {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
      }

      :deep(.ele-gallery) {
        display: none;
      }
    }

  }
}
</style>
